<template>
  <div class="splitpanes">
    <a-split v-model:size="size_vertical" direction="vertical" min="80px" class="size-vertical-view">
      <template #first>
        <a-split v-model:size="size_horizontal" min="80px" class="size-horizontal-view">
          <template #first>
            <CodeEdit :value="rules" :language="language" @change="handleRulesEditorChange" />
          </template>
          <template #second>
            <CodeEdit :value="code" :language="language" @change="handleCodeEditorChange" />
          </template>
        </a-split>
      </template>
      <template #second>
        <CodeEdit :value="result" :language="language" @change="handleResultEditorChange" fontSize="14" />
      </template>
    </a-split>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import CodeEdit from "@/component/CodeEdit.vue";

const size_horizontal = ref(0.5);
const size_vertical = ref(0.6);

// 定义 emits
const emit = defineEmits(['update:rules', 'update:code', 'update:result'])
// 定义 props
const props = defineProps({
  rules: {
    type: String,
    default: ""
  },
  code: {
    type: String,
    default: ""
  },
  result: {
    type: String,
    default: ""
  }
})
const language = ref('rust');

// 处理编辑器内容变化的方法
const handleRulesEditorChange = (value) => {
  emit('update:rules', value)
};
const handleCodeEditorChange = (value) => {
  emit('update:code', value)
};
const handleResultEditorChange = (value) => {
  emit('update:result', value)
};


</script>

<style>
.splitpanes {
  background-color: #3c3f41;
}

.size-vertical-view {
  height: calc(100vh - 52px);
  width: 100%;
}

.size-horizontal-view {
  height: 100%;
  width: 100%;
}

.auto-textarea {
  width: 100%;
  height: calc(100% - 5px);
  border: none;
  outline: none;
  resize: none;
  padding: 10px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: auto;
  background-color: #f2f3f5;
}
</style>